﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>绘画艺术中心</title>
    <link rel="apple-touch-icon" sizes="16x16" href="./images/logo/painting_art.png">
    <link rel="apple-touch-icon" sizes="57x57" href="./images/logo/painting_art.png">
    <link rel="apple-touch-icon" sizes="72x72" href="./images/logo/painting_art.png">
    <link rel="shortcut icon" type="image/png" sizes="16x16" href="./images/logo/painting_art.png">
    <link rel="shortcut icon" type="image/png" sizes="57x57" href="./images/logo/painting_art.png">
    <link rel="shortcut icon" type="image/png" sizes="72x72" href="./images/logo/painting_art.png">
    <link rel="stylesheet" href="css/pubNav.css">

    <!--导航----------------------------------------------------------------------------------------------->
    <link rel="stylesheet" href="libs/bootstrap-3.3.7-dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="libs/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="libs/top_nav/css/top_nav.css">
    <link rel="stylesheet" type="text/css" href="libs/top_nav/css/bootsnav.css">
    <style type="text/css">
        .navbar-brand {
            padding: 29px 15px;
            height: auto;
        }

        nav.navbar.bootsnav {
            border: none;
            margin-bottom: 150px;
        }

        .navbar-nav {
            float: left;
        }

        nav.navbar.bootsnav ul.nav > li > a {
            color: #474747;
            text-transform: uppercase;
            padding: 30px;
        }

        nav.navbar.bootsnav ul.nav > li:hover {
            background: #f4f4f4;
        }

        .nav > li:after {
            content: "";
            width: 0;
            height: 5px;
            background: #34c9dd;
            position: absolute;
            bottom: 0;
            left: 0;
            transition: all 0.5s ease 0s;
        }

        .nav > li:hover:after {
            width: 100%;
        }

        nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after {
            content: "+";
            font-family: 'FontAwesome';
            font-size: 16px;
            font-weight: 500;
            position: absolute;
            top: 35%;
            right: 10%;
            transition: all 0.4s ease 0s;
        }

        nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after {
            content: "\f105";
            transform: rotate(90deg);
        }

        .dropdown-menu.multi-dropdown {
            position: absolute;
            left: -100% !important;
        }

        nav.navbar.bootsnav li.dropdown ul.dropdown-menu {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            border: none;
        }

        @media only screen and (max-width: 990px) {
            nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after,
            nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after {
                content: " ";
            }

            .dropdown-menu.multi-dropdown {
                left: 0 !important;
            }

            nav.navbar.bootsnav ul.nav > li:hover {
                background: transparent;
            }

            nav.navbar.bootsnav ul.nav > li > a {
                margin: 0;
            }
        }
    </style>
</head>
<body>
<div class="art_home">

    <!--导航----------------------------------------------------------------------------------------------->
    <div class="art_home_pub_nav">
        <div class="art_home_nav">
            <div class="art_home_nav_logo"></div>
            <div class="container art_home_nav_main_list">
                <div class="row">
                    <div class="col-md-12">
                        <nav class="navbar navbar-default navbar-mobile bootsnav">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse"
                                        data-target="#navbar-menu">
                                    <i class="fa fa-bars"></i>
                                </button>
                            </div>
                            <div class="collapse navbar-collapse" id="navbar-menu">
                                <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">首页</a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">绘画艺术中心</a></li>
                                            <li><a href="#">绘画艺术逻辑</a></li>
                                            <li><a href="#">艺术专栏</a></li>
                                            <li><a href="#">让艺术学习不孤单</a></li>
                                            <li><a href="#">合作学术机构</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">课程</a>
                                        <ul class="dropdown-menu">
                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">造型逻辑</a>
                                                <ul class="dropdown-menu">
                                                    <li class="add_space">
                                                        <a href="#">审美</a>
                                                        <a href="#">空间</a>
                                                    </li>
                                                    <li class="add_space">
                                                        <a href="#">分型</a>
                                                        <a href="#">减法</a>
                                                    </li>
                                                    <li class="add_space">
                                                        <a href="#">肖像</a>
                                                        <a href="#">解剖</a>
                                                    </li>
                                                    <li class="add_space">
                                                        <a href="#">衣纹</a>
                                                        <a href="#">古典</a>
                                                    </li>
                                                    <li class="add_space">
                                                        <a href="#">现代</a>
                                                        <a href="#">色彩</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">造型表现</a>
                                                <ul class="dropdown-menu">
                                                    <li class="add_space">
                                                        <a href="#">审美</a>
                                                        <a href="#">空间</a>
                                                    </li>
                                                    <li class="add_space">
                                                        <a href="#">分型</a>
                                                        <a href="#">减法</a>
                                                    </li>
                                                    <li class="add_space">
                                                        <a href="#">肖像</a>
                                                        <a href="#">解剖</a>
                                                    </li>
                                                    <li class="add_space">
                                                        <a href="#">衣纹</a>
                                                        <a href="#">古典</a>
                                                    </li>
                                                    <li class="add_space">
                                                        <a href="#">现代</a>
                                                        <a href="#">色彩</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">造型设计</a>
                                                <ul class="dropdown-menu">
                                                    <li class="add_space">
                                                        <a href="#">审美</a>
                                                        <a href="#">空间</a>
                                                    </li>
                                                    <li class="add_space">
                                                        <a href="#">分型</a>
                                                        <a href="#">减法</a>
                                                    </li>
                                                    <li class="add_space">
                                                        <a href="#">肖像</a>
                                                        <a href="#">解剖</a>
                                                    </li>
                                                    <li class="add_space">
                                                        <a href="#">衣纹</a>
                                                        <a href="#">古典</a>
                                                    </li>
                                                    <li class="add_space">
                                                        <a href="#">现代</a>
                                                        <a href="#">色彩</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">会员</a>
                                        <ul class="dropdown-menu">
                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">VIP会员成就</a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">学员风采</a></li>
                                                    <li><a href="#">学员作品</a></li>
                                                    <li><a href="#">师资力量</a></li>
                                                </ul>
                                            </li>
                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">高级会员服务</a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">素材服务</a></li>
                                                    <li><a href="#">教材服务</a></li>
                                                    <li><a href="#">软件服务</a></li>
                                                    <li><a href="#">硬件服务</a></li>
                                                    <li><a href="#">耗材服务</a></li>
                                                </ul>
                                            </li>
                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">免费会员服务</a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">造型逻辑公开课</a></li>
                                                    <li><a href="#">造型表现公开课</a></li>
                                                    <li><a href="#">造型设计公开课</a></li>
                                                    <li><a href="#">升级会员</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">交流</a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">艺术交流</a></li>
                                            <li><a href="#">艺术分享</a></li>
                                            <li><a href="#">艺术视频</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">关于</a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">企业简介</a></li>
                                            <li><a href="#">使命愿景</a></li>
                                            <li><a href="#">社会责任</a></li>
                                            <li><a href="#">团队简介</a></li>
                                            <li><a href="#">联系我们</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="art_home_nav_icon">
                <span class="home_nav_icon_fa home_nav_icon_fa_lang">
                     <span class="home_nav_lang_ch">中文</span> | <span class="home_nav_lang_en">English</span>
                </span>
                <span class="home_nav_icon_fa home_nav_search_show_icon">
                     <i class="fa fa-search fa-lg"></i>
                </span>
                <span class="home_nav_icon_fa home_nav_icon_shopping_cart">
                     <i class="fa fa-shopping-cart fa-lg"></i>
                </span>
                <span class="home_nav_icon_fa  home_nav_icon_fa_align">
                     <i class="fa fa-align-left fa-lg"></i>
                </span>
            </div>
        </div>

        <!--搜索------------------------------------------------------------------------------------------>
        <div class="art_home_search">
            <div class="art_home_search_content">
                <div class="search_content_close">
                    <i class="fa fa-close home_nav_search_hide_icon"></i>
                </div>
                <p class="search_content_info">
                    Start typing and press Enter to search !
                </p>
                <div class="search_content_input">
                    <form class="search-form" role="search" action="https://draven.la-studioweb.com/" method="get">
                        <input autocomplete="off" name="s" type="text" class="search-field" placeholder="Search">
                        <button class="search-button" type="submit">
                            <i class="fa fa-search"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!--购物车------------------------------------------------------------------------------------------>
        <div class="art_home_shopping_cart">
            <div class="art_home_shopping_cart_content">
                <div class="art_home_shopping_cart_top">
                    <i class="fa fa-close fa-lg art_home_shopping_cart_close"></i>
                </div>
                <div class="art_home_shopping_cart_main">
                    <h3>购物车</h3>
                    <p>内容</p>
                </div>
            </div>
        </div>
        <!--侧边栏------------------------------------------------------------------------------------------>
        <div class="art_home_right_side_bar">
            <div class="right_side_bar_content">
                <div class="right_side_bar_top">
                    <i class="fa fa-close fa-lg right_side_bar_close"></i>
                </div>
                <div class="right_side_bar_main">
                    <h3>公司简介</h3>
                    <p>介绍内容</p>
                </div>
            </div>
        </div>
    </div>

    <div class="art_home_main_content">

    </div>


    <!--页脚---------------------------------------------------------------------------------------------->
    <div class="art_home_footer">
        <div class="art_home_footer_content">
            <div class="art_home_footer_content_logo">

            </div>
        </div>
    </div>

    <!--联系方式----------------------------------------------------------------------------------------------->
    <div class="art_home_contact">
        <ul class="art_home_contact_ul">
            <li class="art_home_contact_li">
                <i class="fa fa-comments-o fa-lg art_home_contact_li_chat"></i>
            </li>
            <li class="art_home_contact_li">
                <i class="fa fa-phone fa-lg art_home_contact_li_phone"></i>
            </li>
            <li class="art_home_contact_li">
                <i class="fa fa-envelope-o  fa-lg art_home_contact_li_email"></i>
            </li>
        </ul>
    </div>

</div>
<script src="libs/jquery.min.js"></script>
<!--导航----------------------------------------------------------------------------------------------->
<script src="libs/top_nav/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="libs/top_nav/js/bootstrap.min.js"></script>
<script type="text/javascript" src="libs/top_nav/js/bootsnav.js"></script>
<script type='application/javascript' src='libs/fastclick.js'></script>


<script>
    $(function () {

        /*导航模块-below******************************************************************/
        FastClick.attach(document.body);


        //搜索
        $('.home_nav_search_show_icon').bind('click', function () {
            console.log('click-01');
            $('.art_home_search').css({opacity: '1', visibility: 'visible'})
        });
        $('.home_nav_search_show_icon').bind('touchend', function () {
            console.log('touchend-01');
            $('.art_home_search').css({opacity: '1', visibility: 'visible'})
        });


        $('.home_nav_search_hide_icon').bind('click', function () {
            console.log('click-02');
            $('.art_home_search').css({opacity: '0', visibility: 'hidden'})
        });
        $('.home_nav_search_hide_icon').bind('touchend', function () {
            console.log('touchend-02');
            $('.art_home_search').css({opacity: '0', visibility: 'hidden'})
        });


        //购物车
        $('.home_nav_icon_shopping_cart').bind('click', function () {
            console.log('click-03');
            $('.art_home_shopping_cart').css({right: '0'})
        });
        $('.home_nav_icon_shopping_cart').bind('touchend', function () {
            console.log('touchend-03');
            $('.art_home_shopping_cart').css({right: '0'})
        });

        $('.art_home_shopping_cart_close').bind('click', function () {
            console.log('click-04');
            $('.art_home_shopping_cart').css({right: '-360px'})
        });

        $('.art_home_shopping_cart_close').bind('touchend', function () {
            console.log('touchend-04');
            $('.art_home_shopping_cart').css({right: '-360px'})
        });


        //公司简介
        $('.home_nav_icon_fa_align').bind('click', function () {
            $('.art_home_right_side_bar').css({right: '0'})
        });

        $('.right_side_bar_close').bind('click', function () {
            $('.art_home_right_side_bar').css({right: '-360px'})
        });

        /*导航模块-above******************************************************************/


    });
</script>


</body>
</html>